import React, { Component } from 'react';
import { View } from 'react-native';
import { observer } from 'mobx-react';
import { Scene, Actions } from 'react-native-router-flux';
import navBarStyle from '../../../components/navBarStyle';
import Spin from '../../../components/spin';
import activity from '../models/activity';
import Main from './components/main';
import Bottom from './components/bottm';
import styles from './styles';
import NavBarIconBtn from '../../../components/NavBarIconBtn';

@observer
class ActivityDetail extends Component {
  joinActivity = () => {
    switch (this.props.store.data.type) {
      case 10: {
        Actions.addActivityCustomer({ eventId: this.props.store.data.eventId });
        break;
      }
      case 11: {
        Actions.addActivityPolicy({ eventId: this.props.store.data.eventId });
        break;
      }
      default: {
        return false;
      }
    }
  };
  render() {
    return (
      <Spin visible={this.props.store.pending}>
        <View style={styles.detail}>
          <Main data={this.props.store.data} />
          {this.props.store.data.type !== 1 ? (
            <Bottom
              onPress={this.joinActivity}
              status={this.props.store.data.state}
            />
          ) : null}
        </View>
      </Spin>
    );
  }
}

module.exports = (
  <Scene
    key="activityDetail"
    component={ActivityDetail}
    title="活动详情"
    path="/activity/:id/:type"
    hideTabBar
    {...navBarStyle}
    store={activity}
    onEnter={({ eventId }) => activity.init(eventId)}
    renderRightButton={({ eventId, eventType }) => {
      if (eventType === 1) {
        return null;
      }
      return (
        <NavBarIconBtn
          onPress={() => {
            Actions.activityData({ eventId });
          }}
          name="list"
          title="我的提交"
        />
      )
    }}
  />
);
